<template>
    <div class="confiscationIndex">
       <navAndBanner></navAndBanner>
        <div class="img2">

        </div>
        <div style="height:1px;border-top:3px solid #ffcc00;width:76.4%;margin:0 auto;"></div>
        <div class="checkDate">
            <div class="dateStart">
                <p>起始日期</p>
                <template>
                    <Row>
                        <Col span="12">
                        <Date-picker type="date" confirm placeholder="选择日期" v-model="startDate" style="width: 200px"></Date-picker>
                        </Col>
                    </Row>
                </template>

            </div>
            <div class="dateStart">
                <p>结束日期</p>
                <template>
                    <Row>
                        <Col span="12">
                        <Date-picker type="date" confirm placeholder="选择日期" v-model="endDate" style="width: 200px"></Date-picker>
                        </Col>
                    </Row>
                </template>

            </div>
            <p>
                <template>
                    <Button type="warning" :long="true" @click="obtainData()">确定</Button>
                </template>
            </p>
            <p style="">
                <template>
                    <Button type="warning" :long="true">打印</Button>
                </template>
            </p>
        </div>
        <main class="confiscationQueryContent">
            <template>
                <Table border :columns="columns7" :stripe="true" :data="data6" height="800"></Table>
            </template>
        </main>


        <div class="footer">
            <p>kqmts &copy 2015-2017 All Rights Reserved</p>
            <p>川ICP备16020686号</p>
        </div>
    </div>
</template>

<script>
    import navAndBanner from '../navAndBanner.vue'
    export default {
        components:{
                navAndBanner
            },
        name: "confiscationIndex",
        data() {
            return {
                userInfo: "",
                columns7: [
                    {
                        title: '序列',
                        key: 'index',

                    },
                    {
                        title: '商品名称',
                        key: 'SPMC'
                    },
                    {
                        title: '整支数量',
                        key: 'ZZSL'
                    },
                    {
                        title: '散支数量',
                        key: 'SZSL'
                    },
                    {
                        title: '散支估量',
                        key: 'SZGL'
                    }
                ],
                data6: [],
                startDate: "",
                endDate: "",
                 userInfo:{}
            }
        },
        mounted() {
            
           this.userInfo = JSON.parse(sessionStorage.userinfo).data
            let _this = this
            this.$http.post(`${this.URL}/api/ws/getConfiscationSummary`, { "token": this.userInfo.token, "starttime": this.startDate, "endtime": this.endDate }).then(function (res) {
                console.log(res)
                for (var key in res.data.data) {
                    _this.data6.push(res.data.data[key])
                }
                for (var i = 0; i < _this.data6.length; i++) {
                    _this.data6[i]["index"] = i + 1
                }
            })


        },
        methods: {
            obtainData() {
                let _this = this
                this.$http.post(`${this.URL}/api/ws/getConfiscationSummary`, { "token": this.userInfo.token, "starttime": this.startDate, "endtime": this.endDate }).then(function (res) {
                    console.log(res)
                    _this.data6 = []
                    for (var key in res.data.data) {
                        _this.data6.push(res.data.data[key])
                    }
                    for (var i = 0; i < _this.data6.length; i++) {
                        _this.data6[i]["index"] = i + 1
                    }
                })

            }
        }
    }

</script>

<style>
    .navAndBanner {
        background: linear-gradient(30deg, #b490ca, #5ebbe7);
        width: 100%;
        height: 120px;
        vertical-align: middle;
        padding-top: 40px
    }

    .ivu-input-icon-normal+.ivu-input {
        background: #eee;
    }

    .img2 {
        background: url(../../assets/img/confiscationTitle2.png);
        width: 800px;
        height: 85px;
        margin: 0 auto;
        margin-top: 90px;
        margin-bottom: 80px;
        background-repeat: no-repeat;
    }

    a {
        text-decoration: none;
    }

    nav ul li {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5%
    }

    nav ul li a {
        font-size: 24px;
        color: #999999;
    }

    nav ul li:first-child {
        margin-left: 13%;
        margin-right: 15%;
    }

    nav ul li:last-child {
        margin-top: 12px;
        float: right
    }
    /*日期选择*/

    .checkDate {
        padding-top: 32px;
        width: 70.8vw;
        margin: auto;
        display: flex;
    }

    .checkDate>p {
        width: 5vw;
        height: 2.7vw;
    }

    .checkDate>p:nth-child(3) {
        margin-right: 5vw;
        margin-left: 3vw;
    }


    .dateStart {
        margin-left: 5vw;
        display: flex;
        margin-right: 50px;
    }

    .dateStart>p:nth-child(1) {
        margin-top: .2vw;
        margin-right: 1vw;
        font-size: .8vw;
        font-weight: 600;
    }
    /*内容*/

    .confiscationQueryContent {
        width: 70.8vw;
        margin: auto;
        margin-top: 2.6vw;
        height: auto;
    }
    /*尾部*/

    .footer {
        height: 125px;
        width: 100%;
        background: linear-gradient(30deg, #b490ca, #5ebbe7);
        text-align: center;
        vertical-align: middle;
        color: white;
        padding-top: 50px;
        margin-top: 125px
    }
</style>